﻿<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="meta description">

	<title>Dream游戏商城-购物车</title>

	<!--=== Favicon ===-->
	<link rel="shortcut icon" href="assets/img/favicon.ico"
		  type="image/x-icon" />

	<!--== Google Fonts ==-->
	<link
			href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700"
			rel="stylesheet">

	<!--=== Bootstrap CSS ===-->
	<link href="assets/css/vendor/bootstrap.min.css" rel="stylesheet">
	<!--=== Font-Awesome CSS ===-->
	<link href="assets/css/vendor/font-awesome.css" rel="stylesheet">
	<!--=== Plugins CSS ===-->
	<link href="assets/css/plugins.css" rel="stylesheet">
	<!--=== Helper CSS ===-->
	<link href="assets/css/helper.min.css" rel="stylesheet">
	<!--=== Main Style CSS ===-->
	<link href="assets/css/style.css" rel="stylesheet">

	<!-- Modernizer JS -->
	<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
	<script src="assets/js/jquery-3.3.1.min.js"></script>
	<!--[if lt IE 9]>
	<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

<body>

<!--== Start Header Section ==-->
<header id="header-area">
	<!-- Start PreHeader Area -->
	<div class="preheader-area">
		<div class="container">
			<div class="row">
				<div class="col-md-5 col-lg-6">
					<div class="preheader-contact-info d-flex align-items-center justify-content-between justify-content-md-start">
						<div class="single-contact-info">
                            <span class="contact-icon">
                                <i class="fa fa-envelope"></i>
                            </span>
							<a href="#" class="contact-text">
								<strong>Email:</strong> Dream@email.here
									</a>
								</div>
								<div class="single-contact-info">
								    <span class="contact-icon">
								        <i class="fa fa-phone"></i>
								    </span>
									<a href="#" class="contact-text">
										<strong>电话:</strong> (+86) 188-8888-8888
						</div>
					</div>
				</div>

				<div class="col-md-7 col-lg-6 mt-xs-10">
					<div class="site-setting-menu">
						<ul class="nav justify-content-center justify-content-md-end">
							<li><a href="my-account.html">个人中心</a></li>
							<li><a href="order.html">查看订单</a></li>
							<li><a  id="logout" href="#" >注销登录</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- End PreHeader Area -->

	<!-- Start Header Middle Area -->
	<div class="header-middle-area">
		<div class="container">
			<div class="row">
				<!-- Logo Area Start -->
				<div class="col-4 col-md-2 col-xl-3 m-auto text-center text-lg-left">
					<a href="index.html" class="logo-wrap d-block">
						<img src="assets/img/logo.png" alt="Logo" class="img-fluid"/>
					</a>
				</div>
				<!-- Logo Area End -->

				<!-- Search Box Area Start -->
				<div class="col-8 col-md-7 col- m-auto ">
					<div class="search-box-wrap">
						<form class="search-form d-flex" action="#" method="get">
							<input  id="keywords" type="search" name="search" placeholder="搜索游戏"/>
							<button  id="btnsearch" type="button" class="btn btn-search"><img src="assets/img/icons/icon-search.png"
																alt="Search Icon"/>
							</button>
						</form>
					</div>
				</div>
				<!-- Search Box Area End -->
			</div>
		</div>
	</div>
	<!-- End Header Middle Area -->

	<!-- Start Main Menu Area -->
	<div class="navigation-area" id="fixheader">
		<div class="container">
			<div class="row">
				<!-- Categories List Start -->
				<div class="col-10 col-lg-3">
					<div class="categories-list-wrap">
						<button class="btn btn-category d-none d-lg-inline-block"><i class="fa fa-bars"></i> 分类
						</button>
						<ul class="category-list-menu">


							<li class="category-item-parent dropdown-show">
								<a href="#" class="category-item arrow-toggle">
									<img src="assets/img/icons/games.png" alt="Mobile"/>
									<span>游戏分类</span>
								</a>
								<ul id="gametype" class="mega-menu-wrap dropdown-nav">


								</ul>
							</li>


						</ul>
					</div>
				</div>
				<!-- Categories List End -->


				<!-- Main Menu Start -->
				<div class="col-2 col-lg-9 d-none d-lg-block">
					<div class="main-menu-wrap">
						<nav class="mainmenu">
							<ul class="main-navbar clearfix">
								<li class="dropdown-show"><a href="index.html" class="">首页</a>
									<ul class="dropdown-nav sub-dropdown">

									</ul></li>
								<li><a href="about.html">关于我们</a></li>


								<li class="dropdown-show"><a href="#" class="arrow-toggle">页面</a>
									<ul class="dropdown-nav">
										<li><a href="shoppingcart.html">购物车</a></li>
										<li><a href="my-account.html" >个人中心</a></li>
									</ul></li>
							</ul>
						</nav>
					</div>
				</div>
				<!-- Main Menu End -->
			</div>
		</div>
	</div>
	<!-- End Main Menu Area -->
</header>
<!--== End Header Section ==-->

<!--== Start Page Breadcrumb ==-->
<div class="page-breadcrumb-wrap">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="page-breadcrumb">
					<ul class="nav">
						<li><a href="index.html">首页</a></li>
						<li><a href="shoppingcart.html" class="active">购物车</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!--== End Page Breadcrumb ==-->
<!--== Page Content Wrapper Start ==-->
<div id="page-content-wrapper">
	<div class="container">
		<!-- Cart Page Content Start -->
		<div class="row">
			<div class="col-lg-12">
				<!-- Cart Table Area -->
				<div class="cart-table table-responsive">
					<table id="shoppingtab" class="table table-bordered">
						<thead>
						<tr>
							<th class="pro-thumbnail"><input name="checkAll" class="gamebox" type="checkbox" id="checkAll" /></th>
							<th class="pro-thumbnail">编号</th>
							<th class="pro-title">缩略图</th>
							<th class="pro-title">游戏名</th>
							<!--                            <th class="pro-price">买家</th>-->
							<th class="pro-subtotal">单价</th>
							<th class="pro-remove">删除该条</th>
						</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
				</div>
				<!-- 删除购物车商品 -->



				<!-- Cart Update Option -->
				<div class="cart-update-option d-block d-lg-flex">
					<div class="apply-coupon-wrapper"></div>
					<div class="cart-update">
						<a href="#" class="btn">更新购物车信息</a>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-6 ml-auto">
				<!-- Cart Calculation Area -->
				<div class="cart-calculator-wrapper">
					<h3>总计：</h3>
					<div class="cart-calculate-items">
						<div class="table-responsive">
							<table class="table table-bordered">
								<tr>
									<td>总金额：</td>
									<td id="totalprice" class="total-amount">0</td>
								</tr>
							</table>
						</div>
					</div>
					<button type="button" id="clear" class="btn btn-priary">立即结算</button>
					<!--<a href="cs.do?op=checkout&id=${param.id}&phoneid=${param.phoneid}" class="btn">进行结算</a>-->
				</div>
			</div>
		</div>
		<!-- Cart Page Content End -->
	</div>
</div>
<!--== Page Content Wrapper End ==-->
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">

	$(document).ready(function() {


		getData();

		$("#btnsearch").click(function(){
			getData();
		});


		//获取总价的方法
		$(document).on("click",".gamebox",function () {
			let checked=$('input[name="game"]:checked');
			console.log(checked.length);
			let total =0;
			for (let i = 0; i < checked.length; i++) {
				let game_price = checked[i].getAttribute('price');
				let total_price=parseInt(game_price);
				total+=total_price;
			}


			$("#totalprice").html(total);
		});

		//清空购物车的方法
		$("#clear").click(function () {
			let  ids=[];

			$.each($('input[name="game"]:checked'),function (k,v){
				ids.push(v.value);
			});

			console.log(ids);

			if(ids.length == 0){
				alert("没有游戏被选中");
			}else{

				$.ajax({

					url:"http://localhost:8080/dreamgame/shopping/clear",

					async:true,

					dataType:"json",

					type:"post",

					data: {ids:ids},

					success:(r)=> {
						alert(r.msg);

						//如果成功,跳转页面
						if(r.code==1){

							console.log("成功");
							window.location.href ='success.html';
							// window.location.reload(true);
						}
						//如果失败，刷新页面
						if(r.code==0){
							window.location.reload(true);
						}
					},

					error:(data)=>{
						console.log(data);
						alert("操作异常");
					}

				})

			}
		});


		//全选的方法
		$("#checkAll").click(function (){

			let changeAll =$("#checkAll").prop("checked");

			$("[name='game']").prop("checked",changeAll);


		});


		//从购物车中删除的方法
		$(document).on("click",".delbtn",function () {
			let cartid=$(this).attr("value");

			if(confirm("确认从购物车中删除吗？")) {
				$.ajax({
					url: "http://localhost:8080/dreamgame/shopping/del/" + cartid,

					async: true,

					dataType: "json",

					type: "delete",

					success: (r) => {
						console.log(r);
						if(r.code==1){
							alert("删除成功")
							window.location.reload(true);
						}
					},

					error:(data)=>{

						console.log(data);
					}

				})
			}


		});
		//获取数据的方法
		function getData() {
			$.ajax({
				url:"http://localhost:8080/dreamgame/shopping/show?keywords="+$("#keywords").val(),

				async:true,

				dataType:"json",

				type:"get",

				success:(r)=>{

					$("#shoppingtab tbody").children().remove();

					let list=r.data;

					console.log(list);


					for (let s of list) {

						console.log(s);


						let str=`<tr>
                        <td class="pro-title"><input name="game" class="gamebox" type="checkbox" price="${s.price}" value="${s.game_id}"/></td>
						<td class="pro-title"><a href="#">${s.cart_id}</a></td>
						<td class="pro-thumbnail"><a href="#"><img
                                        class="img-fluid" src="http://rjgs8gsgn.hn-bkt.clouddn.com/${s.game_img}" alt="Product" /></a></td>
                        <td class="pro-price">${s.game_name}</td>
                            <td class="pro-price">${s.price}</td>
                            <td class="pro-remove"><a href="#" value="${s.cart_id}" class="delbtn"><i
                                        class="fa fa-trash-o"></i></a></td>
                            </tr>`;

						// console.log(str);

						$("#shoppingtab tbody").append(str);

					}
				}
			})
		}



		//分类
		$(document).on("click",".mega-item-title", function()  {
			let typeid=$(this).attr("value");
			// console.log(typeid);

			$.ajax({

				url: "http://localhost:8080/dreamgame/gametype/type/" +typeid,

				async: true,

				dataType: "json",

				type: "get",

				success: (r) => {
					window.location.href = "game.html";
				}

			})

		})

		getTypes();

		//获取游戏类型的方法
		function getTypes() {
			$.ajax({
				url:"http://localhost:8080/dreamgame/gametype/gettypes",

				async:true,

				dataType:"json",

				type:"get",

				success:(r)=>{

					let list=r.data;

					for (let t of list) {

						// console.log(t);

						let str=`  <li class="mega-menu-item">
                        <a href="#" value="${t.typeid}" class="mega-item-title">${t.typename}</a>
                        </li>`;
						console.log(str);
						$("#gametype").append(str);

					}

				}
			})
		}


	})

</script>

<!--== Start Footer Area ==-->
<footer id="footer-area">
	<!-- Footer Widget Area Start -->
	<div class="footer-widget-area">
		<div class="container">
			<div class="footer-widget-content">
				<div class="row">


					<!-- Single Widget-item Start -->
					<div class="col-lg-3 col-sm-6">
						<div class="single-widget-item">
							<h3 class="widget-title">Contact Us</h3>
							<div class="widget-body">
								<div class="contact-info">
									<div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-home"></i>
                                    </span>
										<a href="mailto:your@example.com" class="contact-text">
											<strong>Address:</strong> 15/C, Uttara, Dhaka
										</a>
									</div>
									<div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-phone"></i>
                                    </span>
										<a href="mailto:your@example.com" class="contact-text">
											<strong>Phone:</strong> (+1) 866-540-3229
										</a>
									</div>
									<div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-envelope"></i>
                                    </span>
										<a href="mailto:your@example.com" class="contact-text">
											<strong>Email:</strong> your@email.here
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- Single Widget-item End -->
				</div>
			</div>
		</div>
	</div>
	<!-- Footer Widget Area End -->

	<!-- Footer Bottom Area -->
	<div class="footer-bttom-area">
		<div class="container">
			<div class="row">
				<!-- Copyright Text Area -->
				<div class="col-md-6 m-auto text-center text-md-left order-last order-md-first">
					<p>版权所有 &copy; 2022.Dream游戏商城 保留所有权利。</a></p>
				</div>
				<!-- Copyright Text Area -->

				<!-- Payment Method Area -->
				<div class="col-md-6 m-auto text-center text-md-right">
					<div class="payment-support">
						<img src="assets/img/payment.png" alt="Payment" class="d-inline-block" />
					</div>
				</div>
				<!-- Payment Method Area -->
			</div>
		</div>
	</div>
	<!-- Footer Bottom Area -->
</footer>
<!--== End Footer Area ==-->

<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->

<!--== Product Quick View Modal Area Wrap ==-->
<div class="modal" id="quickView" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true"><img
							src="assets/img/icons/cancel.png" alt="Close" class="img-fluid" /></span>
			</button>
			<div class="modal-body">
				<div class="quick-view-content single-product-page-content">
					<div class="row">
						<!-- Product Thumbnail Start -->
						<div class="col-lg-5 col-md-6">
							<div class="product-thumbnail-wrap">
								<div class="product-thumb-carousel owl-carousel">
									<div class="single-thumb-item">
										<a href="single-product.html"><img class="img-fluid"
																		   src="assets/img/single-pro-1.jpg" alt="Product" /></a>
									</div>

									<div class="single-thumb-item">
										<a href="single-product.html"><img class="img-fluid"
																		   src="assets/img/single-pro-2.jpg" alt="Product" /></a>
									</div>

									<div class="single-thumb-item">
										<a href="single-product.html"><img class="img-fluid"
																		   src="assets/img/single-pro-3.jpg" alt="Product" /></a>
									</div>

									<div class="single-thumb-item">
										<a href="single-product.html"><img class="img-fluid"
																		   src="assets/img/single-pro-4.jpg" alt="Product" /></a>
									</div>
								</div>
							</div>
						</div>
						<!-- Product Thumbnail End -->

						<!-- Product Details Start -->
						<div class="col-lg-7 col-md-6 mt-5 mt-md-0">
							<div class="product-details">
								<h2>
									<a href="single-product.html">Crown Summit Backpack</a>
								</h2>

								<div class="rating">
									<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
										class="fa fa-star"></i> <i class="fa fa-star-half"></i> <i
										class="fa fa-star-o"></i>
								</div>

								<span class="price">$52.00</span>

								<div class="product-info-stock-sku">
										<span class="product-stock-status text-success">In
											Stock</span> <span class="product-sku-status ml-5"><strong>SKU</strong>
											MH03</span>
								</div>

								<p class="products-desc">Ideal for cold-weathered training
									worked lorem ipsum outdoors, the Chaz Hoodie promises superior
									warmth with every wear. Thick material blocks out the wind as
									ribbed cuffs and bottom band seal in body heat Lorem ipsum
									dolor sit amet, consectetur adipisicing elit. Enim,
									reprehenderit.</p>
								<div class="shopping-option-item">
									<h4>Color</h4>
									<ul class="color-option-select d-flex">
										<li class="color-item black">
											<div class="color-hvr">
												<span class="color-fill"></span> <span class="color-name">Black</span>
											</div>
										</li>

										<li class="color-item green">
											<div class="color-hvr">
												<span class="color-fill"></span> <span class="color-name">green</span>
											</div>
										</li>

										<li class="color-item orange">
											<div class="color-hvr">
												<span class="color-fill"></span> <span class="color-name">Orange</span>
											</div>
										</li>
									</ul>
								</div>

								<div class="product-quantity d-flex align-items-center">
									<div class="quantity-field">
										<label for="qty">Qty</label> <input type="number" id="qty"
																			min="1" max="100" value="1" />
									</div>

									<a href="cart.html" class="btn">Add to Cart</a>
								</div>
							</div>
						</div>
						<!-- Product Details End -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--== Product Quick View Modal Area End ==-->


<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="assets/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="assets/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="assets/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="assets/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="assets/js/plugins.js"></script>

<!--=== Active Js ===-->
<script src="assets/js/active.js"></script>
<script>
	$("#logout").click(function logout() {
		// console.log("调用登出方法");
		$.ajax({
			url: "http://localhost:8080/dreamgame/user/loginout",
			async: true,
			dataType: "json",
			type: "post",
			success: (r) => {
				alert(r.msg);
				window.location.href = "login.html";
			}
		})
	});
</script>
</body>
</html>